<template>
  <div class="allshop">
      <header>
          <div v-for="(item,index) in arrs" :key="index" :class="index === cid ?'active':'' ">
              <span @click="changeInd(index)">{{item}}</span>
              <p v-if="index===1">
                <span @click="changeTop('tou')" :class="top ? 'tops' :'' "></span>
                <b :class="(index===1 && !top) ? 'xias' :'' " @click="changeTop('xia')"></b>
              </p>
          </div>
      </header>
      <div class="main">
          <dl v-for="(item) in list" :key="item.goodsId" @click="goDetail(item)">
              <dt>
                  <img :src="item.goodsImgUrl" alt="">
              </dt>
              <dd>
                  <h3>{{item.goodsName}}</h3>
                  <p>{{item.discountTag[0] ? item.discountTag[0] : ' '}}</p>
                  <div>
                      <div v-if="item.goodsDiscountPrice">
                          <p>折后<span>￥{{item.goodsDiscountPrice}}</span>起</p>
                          <s>{{item.minGoodsPrice}}</s>
                      </div>
                      <p v-if="!item.goodsDiscountPrice">￥{{item.minGoodsPrice}}</p>
                  </div>
              </dd>
          </dl>
      </div>
  </div>
</template>

<script>
import {getAllShops} from '../../server/modules/classify';
export default {
    data() {
        return {
            list:[],
            arrs:['销量','价格','上新'],
            cid:0,
            top:false,
            id:''
        }   
    },
    onLoad(options){
        console.log('++++++++++++',options.id)
        this.id = options.id;
    },
    async mounted() {
        let res = await getAllShops({
            "orderByType": 0,
            "goodsName": "",
            "isGroup": "1",
            "groupType": '1',
            "newSearch": 0,
            "pageNo": 1,
            "pageSize": 10,
            "id": this.id
        });
        // console.log('获取到了***',res.result.frontGoodsList)
        this.list = res.result.frontGoodsList;
    },
    methods: {
        async changeInd(index){
            this.cid = index;
            if(index === 2){
                let res = await getAllShops({
                    "orderByType": index+1,
                    "goodsName": "",
                    "isGroup": "1",
                    "groupType": '1',
                    "newSearch": 0,
                    "pageNo": 1,
                    "pageSize": 10,
                    "id": this.id
                });
                this.list = res.result.frontGoodsList;
            }else{
                let res = await getAllShops({
                    "orderByType": index,
                    "goodsName": "",
                    "isGroup": "1",
                    "groupType": '1',
                    "newSearch": 0,
                    "pageNo": 1,
                    "pageSize": 10,
                    "id": this.id
                });
                this.list = res.result.frontGoodsList;
            }
        },
        // 改变头部高亮
        async changeTop(str){
            if(str === 'tou'){
                this.top = true;
                let res = await getAllShops({
                    "orderByType": 2,
                    "goodsName": "",
                    "isGroup": "1",
                    "groupType": '1',
                    "newSearch": 0,
                    "pageNo": 1,
                    "pageSize": 10,
                    "id": this.id
                });
                this.list = res.result.frontGoodsList;
            }else if(str === 'xia'){
                this.top = false;
                let res = await getAllShops({
                    "orderByType": 1,
                    "goodsName": "",
                    "isGroup": "1",
                    "groupType": '1',
                    "newSearch": 0,
                    "pageNo": 1,
                    "pageSize": 10,
                    "id": this.id
                });
                this.list = res.result.frontGoodsList;
            }
        },
        // 跳转详情
        goDetail(item){
            console.log(item.goodsId)
            wx.navigateTo({
				url: `/subpacks/mall/goodsDetail/goodsDetail?id=${item.goodsId}`,
			})
        }
    },
}
</script>

<style lang="scss" scoped>
.allshop{
    width: 100%;
    height: 100%;
    header{
        width: 100%;
        height: 100rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;
        div{
            display: flex;
            padding-bottom: 10rpx;
            p{
                display: flex;
                height: 50rpx;
                flex-direction: column;
                justify-content: space-between;
                margin-left: 10rpx;
                span{
                    display: block;
                    width: 0;
                    height: 0;
                    border-width: 10rpx;
                    border-style: solid;
                    border-color: transparent transparent #ccc transparent;
                }
                b{
                    display: block;
                    width: 0;
                    height: 0;
                    border-width: 10rpx;
                    border-style: solid;
                    border-color: #ccc transparent transparent  transparent;
                }
                .tops{
                    border-color: transparent transparent black transparent;
                }
                .xias{
                    border-color: black transparent transparent transparent;
                }
            }
        }
        .active{
            font-weight: bold;
            border-bottom: solid 4rpx black;
        }
    }
    .main{
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        overflow: scroll;
        dl{
            width: 48%;
            dt{
                width: 100%;
                img{
                    width: 100%;
                    height: 300rpx;
                }
            }
            dd{
                width: 100%;
                h3{
                    width: 100%;
                    height: 85rpx;
                    font-size: 32rpx;
                    // 溢出隐藏，并且出现三个点
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
                >p{
                    background: rgba(255,246,233,1);
                    color: rgba(204,151,86,1);
                    font-size: 24rpx;
                }
                >div{
                    width: 100%;
                    font-size: 22rpx;
                    >div{
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        p{
                            font-size: 28rpx;
                            span{
                                font-size: 32rpx;
                                font-weight: bold;
                            }
                        }
                        s{
                            color: #ccc;
                        }
                    }
                    >p{
                        line-height: 100rpx;
                        font-size: 32rpx;
                        font-weight: bold;
                    }
                    
                }
            }
        }
    }
}
</style>